import { Button, Card, Col, Form, Icon, Input, message, Row } from 'antd'
import PropTypes from 'prop-types'
import React from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { bindActionCreators } from 'redux'

import { login } from '../../../redux/actions/auth'
import loginLogo from './login-logo.png'

import './Login.less'

const FormItem = Form.Item

const propTypes = {
  user: PropTypes.object,
  loggingIn: PropTypes.bool,
  message: PropTypes.string
}

function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some((field) => fieldsError[field])
}

class Login extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false
    }
  }

  componentDidMount() {
    // To disabled submit button at the beginning.
    this.props.form.validateFields()
  }

  handleSubmit(e) {
    e.preventDefault()

    this.setState({
      loading: true
    })

    const data = this.props.form.getFieldsValue()
    this.props
      .login(data.user, data.password)
      .payload.promise.then((response) => {
        this.setState({
          loading: false
        })

        if (response.login) {
          console.warn('login failed: ', response.payload.message)
        } else {
          let result = response.payload.data
          console.log('login result:', result)
          if (result) {
            if (result.success) {
              console.info('[Login] res.payload.data: ', result)
              message.success('欢迎你，' + result.data.name)
              this.props.history.replace('/')
            } else {
              let str = ''
              if (result.msg) {
                str = result.msg
              }
              message.error('登录失败: \n' + str)
            }
          }
        }
      })
      .catch((err) => {
        console.error('[Login] err: ', err)
        this.setState({
          loading: false
        })
      })
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.info('提交表单信息', values)
      } else {
        console.error(err)
      }
    })
  }

  render() {
    const {
      getFieldDecorator,
      getFieldsError,
      getFieldError,
      isFieldTouched,
      setFieldsValue
    } = this.props.form
    // Only show error after a field is touched.
    const userNameError =
      isFieldTouched('userName') && getFieldError('userName')
    const passwordError =
      isFieldTouched('password') && getFieldError('password')

    return (
      <Row
        className="login-row"
        type="flex"
        justify="space-around"
        align="middle"
      >
        <Card className="login-form">
          <Row gutter={12} type="flex" justify="space-around" align="middle">
            <Col span="{6}" />
            <Col span="{6}">
              <img
                alt="loginLogo"
                src={loginLogo}
                style={{ width: 50, height: 50 }}
              />
            </Col>
            <Col span="{6}">
              <h1>React 管理系统</h1>
            </Col>
            <Col span="{6}" />
          </Row>
          <Form layout="horizontal" onSubmit={this.handleSubmit.bind(this)}>
            <FormItem
              validateStatus={userNameError ? 'error' : ''}
              help={userNameError || ''}
            >
              {getFieldDecorator('user', {
                rules: [
                  { required: true, message: 'Please input your username!' }
                ]
              })(
                <Input
                  className="input"
                  prefix={<Icon type="user" style={{ fontSize: 18 }} />}
                  ref={(node) => (this.userNameInput = node)}
                  placeholder="admin"
                />
              )}
            </FormItem>
            <FormItem
              validateStatus={passwordError ? 'error' : ''}
              help={passwordError || ''}
            >
              {getFieldDecorator('password', {
                rules: [
                  { required: true, message: 'Please input your password!' }
                ]
              })(
                <Input
                  className="input"
                  size="large"
                  prefix={<Icon type="lock" style={{ fontSize: 18 }} />}
                  type="password"
                  placeholder="123456"
                />
              )}
            </FormItem>
            <p>
              <Button
                className="btn-login"
                type="primary"
                size="large"
                icon="poweroff"
                loading={this.state.loading}
                htmlType="submit"
                disabled={hasErrors(getFieldsError())}
              >
                确定
              </Button>
            </p>
          </Form>
        </Card>
      </Row>
    )
  }
}

Login.propTypes = propTypes

Login = Form.create()(Login)

function mapStateToProps(state) {
  const { auth } = state
  if (auth.user) {
    return { user: auth.user, loggingIn: auth.loggingIn, message: '' }
  }

  return { user: null, loggingIn: auth.loggingIn, message: auth.message }
}

function mapDispatchToProps(dispatch) {
  return {
    login: bindActionCreators(login, dispatch)
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login))
